<template>
  <div class="app-container calendar-list-container"> 
        <!-- 收入列表 -->
    <div class="filter-container">
      <!-- 收入列表条件查询 -->
      <el-form :inline="true"   ref="ruleForm1">
        <el-form-item :label="$t('financial.Order_number')">
          <el-input  clearable :placeholder="$t('financial.Please_enter_the_order_number')" @keyup.enter.native="handleFilter1" style="width: 200px;margin-right:15px;" class="filter-item" v-model="listQuery.orderId"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Charging_treasure_ID')">
            <el-input  clearable :placeholder="$t('financial.Please_enter_the_charging_treasure_ID')" @keyup.enter.native="handleFilter1" style="width: 200px;margin-right:15px;" class="filter-item" v-model="listQuery.batteryId"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Role')">
          <template>
            <el-select v-model="value" clearable :placeholder="$t('financial.please_choose')">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item :label="$t('financial.Cabinet_number')">
            <el-input  clearable :placeholder="$t('financial.Please_enter_the_cabinet_number')" @keyup.enter.native="handleFilter1" style="width: 200px;margin-right:15px;" class="filter-item" v-model="listQuery.equipmentId"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Income_time')">
            <el-date-picker
              v-model="listQuery.date"
              type="datetimerange"
              :range-separator="$t('financial.to')"
              :start-placeholder="$t('financial.Start_date')"
              :end-placeholder="$t('financial.End_date')"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" class='el-button el-button--primary' icon="el-icon-search" @click="handleFilter1">{{$t('financial.Find')}}</el-button>  
              <el-button   type="primary" class='el-button el-button--primary' icon="el-icon-download" @click="handleDownload" :loading="downloadLoading">{{$t('financial.Export')}}</el-button> 
          </el-form-item>   
      </el-form> 
    </div>
    <!-- 收入列表表格 -->
    <el-table
      :data="income"
      border
      v-loading='loading.income'
      style="width: 100%">
      <el-table-column prop="index" :label="$t('financial.Number')" /> 
      <el-table-column prop="orderId" :label="$t('financial.Order_number')" /> 
      <el-table-column prop="equipmentId" :label="$t('financial.Cabinet_number')" /> 
      <el-table-column prop="batteryId" :label="$t('financial.Charging_treasure_ID')" />
      <el-table-column prop="userName" :label="$t('financial.Merchant_name')" /> 
      <el-table-column prop="userPhone" :label="$t('financial.Merchant_phone_number')" /> 
      <el-table-column prop="agentType" :label="$t('financial.Role')"> 
          <template slot-scope="scope">
              {{scope.row.agentType == 1?$t('financial.Provincial_agent')+'':scope.row.agentType == 2?$t('financial.City_agent')+'':scope.row.agentType == 3?$t('financial.Channel_provider')+'':scope.row.agentType == 4?$t('financial.Merchant')+'':'-'}}
          </template>
      </el-table-column>
      <el-table-column prop="businessAddress" :label="$t('financial.Borrow_location')" /> 
      <el-table-column prop="usersPhone" :label="$t('financial.User_phone_number')"/>
      <el-table-column prop="proportion" :label="$t('financial.Commission_proportion')">
          <template slot-scope="scope">
              {{scope.row.proportion ? `${scope.row.proportion * 100}%` : '0%' }}
          </template>
      </el-table-column>
      <el-table-column prop="revenueAmount" :label="$t('financial.Income')">
          <template slot-scope="scope">
              {{scope.row.revenueAmount + $t('financial.yuan')+'' }}
          </template>
      </el-table-column> 
      <el-table-column prop="payType" :label="$t('financial.Payment_type')">
          <template slot-scope="scope">
              {{scope.row.payType == 1?$t('financial.Balance')+'':scope.row.payType == 2?$t('financial.WeChat_App')+'':scope.row.payType == 3?$t('financial.WeChat_public_number')+'':$t('financial.Credit_Card')+'' }}
          </template>
      </el-table-column>  
      <el-table-column prop="ctime" :label="$t('financial.Income_received_time')"> 
          <template slot-scope="scope">
            <span v-if="scope.row.ctime">{{scope.row.ctime | parseTime}}</span>
            <span v-else>-</span>
          </template>
      </el-table-column>
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination 
      background 
      @size-change="handleSizeChange1" 
      @current-change="handleCurrentChange1" 
      :current-page="listQuery.pageNo" 
      :page-sizes="[10, 20, 30, 40]" 
      :page-size="listQuery.pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total1">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getIncome} from '@/api/financial'
import { getdTime ,parseTime} from '@/utils/index'
import VePie from 'v-charts/lib/pie'
import VeHistogram from 'v-charts/lib/histogram'
export default {
  name: 'financial_income',
  data() {
    return {
      total1: 0,
      income: [],
      listQuery:{
        pageNo: 1,
        pageSize: 10,
        orderId: '',
        batteryId: '',
        equipmentId: '',
        agentType: '',
        date:''
      },
      loading: {
        income: false,
        withdraw: false,
        reject:false
      },
      options: [{
          value: '1',
          label: this.$t('financial.Provincial_agent')
        }, {
          value: '2',
          label: this.$t('financial.City_agent')
        }, {
          value: '3',
          label: this.$t('financial.Channel_provider')
        }, {
          value: '4',
          label: this.$t('financial.Merchant')
        }],
      value: '',
      downloadLoading:false
    }
  },
  components: {
    VePie,
    VeHistogram
  },
  methods: {
    onTabclick ({name}) {
      this.name = name
    },
     //获取收入明细列表
    async getIncomeList(){
      this.loading.income=true
       const { data} = await  getIncome(this.filters)
       this.income = data.records.map((item,index)=>({
         index:index+1,
         ...item
       }))
       this.total1 = data.total
       this.loading.income = false
      //  console.log(this.income[0].agentType)
    },
    //导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [this.$t('financial.Order_number'), this.$t('financial.Cabinet_number'), this.$t('financial.Charging_treasure_ID'),this.$t('financial.Merchant_name'),this.$t('financial.Merchant_phone_number'), this.$t('financial.Role'),this.$t('financial.Borrow_location'),this.$t('financial.User_phone_number'),this.$t('financial.Commission_proportion'),this.$t('financial.Income'),this.$t('financial.Payment_type'),this.$t('financial.Income_received_time')]
        const filterVal = ['orderId', 'equipmentId', 'batteryId','userName','userPhone', 'agentType','businessAddress',
        'usersPhone','proportion','revenueAmount','payType','ctime']
        const data = this.formatJson(filterVal, this.income)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.$t('financial.Income_order_list')
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
      if (j === 'agentType') {
        return v[j]== 1 ? this.$t('financial.Provincial_agent') : v[j] == 2 ? this.$t('financial.City_agent') : v[j] == 3 ? this.$t('financial.Channel_provider'):v[j] == 4 ? this.$t('financial.Merchant'): '-'
      } 
      if (j === 'ctime') {
        return parseTime(v[j]) 
      }
      if (j === 'payType') {
        return v[j] == 1 ? this.$t('financial.Balance') :v[j] == 2 ? this.$t('financial.WeChat_App'):v[j] == 3 ?this.$t('financial.WeChat_public_number'):v[j] == 4 ? this.$t('financial.Credit_Card'):'-'
      } 
      else {
        return v[j]
      }
      }))
    },
    handleFilter1() {
      this.listQuery.pageNo = 1
      this.getIncomeList()
    },
    handleSizeChange1(val) {
      this.listQuery.pageSize = val
      this.getIncomeList()
    },
    handleCurrentChange1(val) {
      this.listQuery.pageNo = val
      this.getIncomeList()
    },
    formatDate(date, offset){
      if(date && typeof date  == 'object' ){
          const d = date[offset];
          return new Date(d).getTime()
      }
      return ''
    },
  },
  computed: {
    filters() {
      return {
        orderId: this.listQuery.orderId,
        batteryId: this.listQuery.batteryId,
        startTime:this.listQuery.date ? this.listQuery.date[0]:'',
        endTime:this.listQuery.date ? this.listQuery.date[1]:'',
        pageNo: this.listQuery.pageNo,
        pageSize: this.listQuery.pageSize,
        equipmentId: this.listQuery.equipmentId,
        hospitalAddress: this.listQuery.hospitalAddress,
        agentType: this.value
      }
    },
  },
    created() {
      this.getIncomeList();
    }
}
</script>

<style lang='scss' scoped>
.cell {
  a {
    color: #409eff;
  }
}
.card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
.el-card /deep/ .el-card__header{
    border-bottom: none
}  

</style>
